<template>
  <div class="home">
    <met-count class="layout" />
    <met-schedule class="layout" />
    <div class="footer layout">
      <Employ />
      <Linechart />
      <Column />
    </div>
  </div>
</template>

<script>
import metCount from '@/views/home/components/metCount'
import metSchedule from '@/views/home/components/metSchedule'
import Employ from '@/views/home/components/employ.vue'
import Linechart from '@/views/home/components/linechart.vue'
import Column from '@/views/home/components/column.vue'
export default {
  components: {
    metCount, metSchedule,Employ,Linechart,Column
  }
}
</script>

<style lang="scss" scoped>
.box {
  border-radius: 20px;
  box-shadow: 4px 3px 7px 0px #00000036;
  letter-spacing: 5px;
  .caption {
    margin:5px 15px;
    font-size: 25px;
    font-weight: normal;
    color: #5E5E5E;
  }
}

.layout{
  margin-bottom: 20px;
}
.footer {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}
</style>